import React from 'react';
import {
  Row,
  Col,
  Table,
  Icon,
  Input,
  Select
} from 'antd';
import axios from 'axios';
import intercept from '../../utils/intercept';
import { config } from 'utils';
import moment from 'moment'
import './less/common.less'
const Option = Select.Option;
export default class CustomRent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [],
      loading: false,
      pagination: {
        current: 1,
        pageSize: 10
      },
      onChange: this.onChange,
      keyword: '',
      status:4
    };
  };

  componentDidMount() {
    this.getRefundInfo();
  };

  search(e) {
    const { value } = e.target;
    this.setState({ keyword: value });
    this.getRefundInfo({ keyword: value });
  }

  onChange = (pagination, filters, sorter) => {
    this.getRefundInfo({
      sortField: sorter.field,
      sortOrder: sorter.order,
      page: pagination.current,
      keyword: this.state.keyword,
      ...filters
    });
  };
  SelectChange = (value) => {
    //console.log(value);
    this.setState({ status: value });
}
  getRefundInfo = (params = {}) => {
    const token = sessionStorage.getItem("token");
    this.setState({ loading: true });
    var keyword = typeof (params.keyword) === "undefined"
      ? ''
      : params.keyword;
      const status = this.state.status;
    axios
      .get(`${config.api}CustomService/GetOtherRefund?page=${params.page}&pageSize=${this.state.pagination.pageSize}&keyword=${keyword}&status=${status}`,{headers:{Authorization:'Bearer ' + token}})
      .then((data) => {
        const pagination = {
          ...this.state.pagination
        };
        //console.log(data);
        pagination.total = data.data.pageList.totalRows;
        pagination.current = params.page;
        this.setState({ loading: false, dataSource: data.data.pageList.collections, pagination });

      })
      .catch(err => {
        intercept;
      })
  };


  render() {
    const columns = [
      {
        title: '订单号',
        dataIndex: 'orderCode',
        width: 150
      }, {
        title: '申请人',
        dataIndex: 'applyOperater',
        width: 150
      }, {
        title: '总金额',
        dataIndex: 'actualPrice',
        width: 150
      }, {
        title: '退款金额',
        dataIndex: 'actualRefundAmount',
        className:'childtable',
        width: 150
      }, {
        title: '申请时间',
        dataIndex: 'applyTime',
        width: 150,
        render:(text,record) => {
            return(
                <span>{new moment(record.applyTime).format('YYYY-MM-DD HH:mm')}</span>
            )
        }
      },{
        title: '退款原因',
        dataIndex: 'refundContent',
        width: 150
      }, {
        title: '退款时间',
        dataIndex: 'refundTime',
        width: 150,
        render:(text,record) => {
            return(
                <span>{new moment(record.refundTime).format('YYYY-MM-DD HH:mm')}</span>
            )
        }
      },{
        title: '操作',
        width: 150,
        key: 'action',
        render: (text, record) => {
          return(
            <span>
            <a>退款</a>
            <span className="ant-divider" />
            <a className="ant-dropdown-link">
              更多操作
              <Icon type="down" />
            </a>
          </span>
          )
      }
      }
    ];
    const className = "components-table-demo-nested";
    const scroll = {
      y: 600
    };
    const selectBefore = (
        <Select defaultValue='全部' onChange={this.SelectChange} style={{ width: 80 }}>
            <Option value="4">全部</Option>
            <Option value="0">处理中</Option>
            <Option value="1">已退款</Option>
            <Option value="2">已撤销</Option>
        </Select>
    );
    return (
      <div className="orderinfo">
        <Row gutter={8} style={{
          marginTop: '20px'
        }}>
          <Col span={24}>
            <div
              style={{
                textAlign: 'center',
                margin: 10
              }}>
              <Input
                placeholder="请输入任意查询条件"
                addonBefore={selectBefore}
                addonAfter={(<span style={{color:'red'}}>{this.state.total}</span>)}
                style={{
                    width: 600
                }}
                onPressEnter={(value) => { this.search(value) }} />

            </div>
            <Table
              {...this.state}
              bordered={true}
              rowKey = {record => record.orderCode}
              className={className}
              columns={columns}
              scroll={scroll} />
          </Col>
        </Row>
      </div>
    )
  }
}
